<template>
	<view class="content">
		
		<view class="c-header" :class="'activeBtn'+btn.active" id="lzcontent">
			<view class="status_bar"></view>
			<view class="h-top">
				<!-- #ifdef H5-->
				<image class="logo1" src="@/static/image/index/logo1.png" @click="refresh"></image>
				<!-- #endif -->
				<!-- #ifndef H5-->
				<image class="logo" src="@/static/image/index/logo.png"></image>
				<!-- #endif -->
				<view class="h-top-rigth">
					<view class="test" @click="action.show=true">
						<image class="icon" src="@/static/image/index/icon1.png"></image>
						<view>{{$t('index.yuyan')}}</view>
					</view>
					<!-- #ifdef H5-->
					<view class="test" @click="download.show=true">
						<image src="@/static/image/index/d.png" style="width:22px;height: 22px;margin-right: 2px;"></image>
						APK
					</view>
					<!-- #endif -->
					<!-- #ifndef H5-->
					<view class="test" @click="shareFn">
						<u-icon name="share" color="#fff" size="24"></u-icon>
					</view>
					<!-- #endif -->
					<!-- <diamondNum></diamondNum> -->
				</view>
			</view>
			<view class="h-btn" >
				<view class="b-btn-warp" :class="{active:btn.active==1}" @click="clickBtn(1)">
					<view class="image-warp">
						<view class="iconfont icon-remen"></view>
					</view>
					<view>{{$t('index.remen')}}</view>
				</view>
				<view class="b-btn-warp"  :class="{active:btn.active==2}" @click="clickBtn(2)">
					<view class="image-warp">
						<view class="iconfont icon-zuqiu"></view>
					</view>
					<view>{{$t('index.zuqiu')}}</view>
				</view>
				<view class="b-btn-warp"  :class="{active:btn.active==3}" @click="clickBtn(3)">
					<view class="image-warp">
						<view class="iconfont icon-lanqiu"></view>
					</view>
					<view>{{$t('index.lanqiu')}}</view>
				</view>
				<view class="b-btn-warp"  :class="{active:btn.active==4}" @click="clickBtn(4)">
					<view class="image-warp">
						<view class="iconfont icon-xianliaoshequ"></view>
					</view>
					<view>{{$t('index.shequ')}}</view>
				</view>
			</view>
		</view>
		<view class="c-content">
			<host-list :top="queryInfo.height" v-if="btn.active==1" @clickRow="add_ad_index"></host-list>
			<football-list ref="football" :top="queryInfo.height" v-if="btn.active==2" @clickRow="add_ad_index"></football-list>
			<basketball-list ref="basketball" :top="queryInfo.height" v-if="btn.active==3" @clickRow="add_ad_index"></basketball-list>
			<community-list ref="community" :top="queryInfo.height" v-if="btn.active==4" @clickRow="add_ad_index"></community-list>
		</view>
		<u-action-sheet :actions="action.list" :show="action.show" safeAreaInsetBottom round="10" closeOnClickOverlay title=" "
		@close="action.show=false" @select="selectAction"></u-action-sheet>
		<!-- 下载 -->
		<!-- #ifdef H5 -->
		<u-popup :show="download.show" mode="bottom" round="14" @close="download.show=false">
			<view class="lzpopup">
				<image style="width: 50px;height: 50px;margin:10px auto;" src="@/static/image/index/h5Logo.png"></image>
				<view style="color: #fff;">OlaScore Is Better on our App</view>
				<view style="color: #b8b8b8;text-align: center;">Live score updates for all matches and free live streaming of matches</view>
				<view class="btns">
					<view class="btn1" @click="download.show=false">Not now</view>
					<view class="btn1 btn2" @click="downloadFn">Download</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif-->
	</view>
</template>

<script>
	let timer
	import hostList from "./hostList/hostList.vue";
	import footballList from "./footballList/footballList.vue";
	import basketballList from "./basketballList/basketballList.vue";
	import communityList from "./communityList/communityList.vue";
	// import diamondNum from "@/components/diamondNum/diamondNum.vue";
	import {mapGetters,mapActions} from 'vuex'
	export default {
		components:{
			hostList,
			footballList,
			basketballList,
			communityList
		},
		computed:{
			...mapGetters(['appLanguage']),
		},
		data() {
			return {
				show:true,
				btn:{
					active:1
				},
				queryInfo:{},
				action:{
					show:false,
					list:[
						{
							name:'English',
							id:'en'
						},
						{
							name:'简体中文',
							id:'zh-Hans'
						},
						// {
						// 	name:'繁体中文',
						// 	id:'zh-Hant'
						// },
						{
							name:'Indonesia',
							id:'id_ID'
						},
						{
							name:'ภาษาไทย',
							id:'th_TH'
						},
						{
							name:'Tiếng Việt',
							id:'vi_VN'
						},
						{
							name:'한국어',
							id:'ko_KR'
						},
						{
							name:'日本語',
							id:'ja'
						},
						{
							name:'Español',
							id:'es_ES'
						},
						{
							name:'Português',
							id:'pt_BR'
						},
					]
				},
				download:{
					show:true
				}
			}
		},
		onLoad() {
			this.$nextTick(()=>{
				this.getQueryInfo()
				this.setTimeoutFn()
			})
			this.$i18n.locale = uni.getStorageSync('appLanguage')||'en'
		},
		onShow() {
			this.loading_Ad()
		},
		methods: {
			...mapActions(['changeLang','add_ad_index','loading_Ad']),
			//选择语言
			selectAction(e){
				this.$i18n.locale = e.id
				this.changeLang(e.id)
				this.show=false
				setTimeout(()=>{
					this.show=true
				})
			},
			refresh(){
				// #ifdef H5
				window.location.reload()
				// #endif
			},
			//下载
			downloadFn(){
				window.location.href="https://img1.zhibo06.com/download/mixfootball.apk"
				this.download.show=false
			},
			//分享
			shareFn(){
				// #ifdef H5
					uni.setClipboardData({
						data: 'https://m.olascore.com/',
						success: function () {
							uni.showToast({
								title: '复制链接成功，请分享',
								icon:"none"
							});
						}
					});
				// #endif
				// #ifndef H5
					plus.share.sendWithSystem({type:'text',href:'https://m.olascore.com/'}, function(){
						console.log('分享成功');
					}, function(e){
						console.log('分享失败：'+JSON.stringify(e));
					});
				// #endif
				
			},
			setTimeoutFn(){
				clearInterval(timer)
				timer = setInterval(()=>{
					if(this.btn.active==2){
						this.$refs.football.upCallback()
					}else if(this.btn.active==3){
						this.$refs.basketball.upCallback()
					}
				},15000)
			},
			clickBtn(index){
				this.btn.active=index
			},
			getQueryInfo(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#lzcontent').boundingClientRect(data => {
					this.queryInfo=data
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content{
		background-color: #1b2a4d;
	}
	/deep/ .u-action-sheet__header__title{
		color:#fff;text-align: left;
	}
	/deep/ .u-action-sheet--hover{
		background-color: #1f315b;
	}
	/deep/ .u-action-sheet__item-wrap__item__name{
		color:#fff;
	}
	/deep/ .u-line{
		border-bottom: 1px solid hsla(0,0%,100%,.10196)!important;
	}
	//#ifdef APP
	/deep/.u-action-sheet{
		padding-bottom: 80px;
	}
	//#endif
	.lzpopup{
		display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;line-height: 26px;
		.btns{
			display: flex;justify-content: space-around;width: 100%;margin: 10px 0;
			.btn1{
				border: 1px solid #fff;color: #fff;width:300rpx;height:35px;text-align: center;line-height: 35px;border-radius: 5px;
			}
			.btn2{
				background-color: #FF6B00;color: #000;border-color: transparent;
			}
		}
	}
	.content {
		height: 100%;display: flex;flex-direction: column;
		
		.c-header{
			width: 100%;width: 100%;
			.h-top{
				max-width: 790px;margin: auto;
				display: flex;padding: 10px 15px 5px;height: 26px;justify-content: space-between;border-bottom: 1px solid hsla(0,0%,100%,.10196);margin-bottom: 5px;
				.logo1{
					width: 100px;height: 100%;
				}
				.logo{
					height: 50px;width: 100px;position: relative;top: -10px;
				}
				.h-top-rigth{
					display: flex;align-items: center;
					.test{
						display: flex;color: #fff;align-items: center;font-size: 14px;margin-left: 10px;
						.icon{
							width: 16px;height: 16px;margin-right: 5px;margin-top: 2px;
						}
					}
				}
			}
			.h-btn{
				display: flex;width: 100%;padding: 10px;color: #fff;align-items: center;justify-content: space-around;box-sizing: border-box;
				height: 45px; max-width: 790px;margin: auto;
				.b-btn-warp{
					display: flex;align-items: center;justify-content: center;font-size: 14px;flex-direction: column;margin-top: 5px;
					.image-warp{
						width: 20px;height: 16px;border-radius: 50%;margin-bottom: 5px;
						// background: hsla(0,0%,100%,.1);
						display: flex;justify-content: center;align-items: center;
						.iconfont{
							color: #fff;font-size: 22px;
						}
					}
				}
				.active{
					color: #ffaf01;
					.image-warp{
						.iconfont{
							color: #ffaf01;
						}
					}
				}
			}
		}
		@media screen and (min-width: 780px) {
			.c-header{
				position: sticky;top: 0;
			}
		}
		.activeBtn1{
			background:url("@/static/image/index/bg0.jpg");
		}
		.activeBtn2{
			background:url("@/static/image/index/bg1.jpg");
		}
		.activeBtn3{
			background:url("@/static/image/index/bg2.jpg");
		}
		.activeBtn4{
			background:url("@/static/image/index/bg3.jpg");
			background-size: 100% 100%;
		}
		.c-content{
			flex: 1;padding-bottom: 50px;box-sizing: border-box;
		}
	}

	
</style>
